<template>
  <div class="discern-box">
    <div class="din">
      <h3>鉴别服务开创者</h3>
      <span>/&nbsp;&nbsp;九大品类&nbsp;专业鉴别&nbsp;快速精准</span>
      <p>></p>
    </div>

    <div class="online">
      <img src="../../../assets/imgs/list1_09.jpg" alt="" />
      <h4>
        244,186,541
        <p class="p1">累计鉴别超过</p>
      </h4>
      <p class="p2">在线鉴别</p>
    </div>


    <div class="din">
      <h4>讨论区</h4>
      <span>/&nbsp;&nbsp;数千位资深鉴别大神在这里交流分享</span>
      <p>></p>
    </div>

    
    <div class="column">
      <h5>专栏</h5>
      <p>新朋友必看！如何发帖才获得大神回复？<br><span>659条回复&nbsp;&nbsp;120条回复5条大神回复</span></p>
    </div>
     <div class="column">
      <h5>专栏</h5>
      <p>讨论区周报l有干货!【签别科普知识】活动开始啦~<br><span>659条回复&nbsp;&nbsp;28条大神回复</span></p>
    </div>
     <div class="column">
      <h5>专栏</h5>
      <p>购买梁道:淘宝代购...<br><span>987条回复&nbsp;&nbsp;3条回复2条大神复</span></p>
    </div>
     <div class="column">
      <h5>专栏</h5>
      <p>新朋友必看！如何发帖才获得大神回复？<br><span>65条回复&nbsp;&nbsp;120条回复5条大神回复</span></p>
    </div>
     <div class="column">
      <h5>专栏</h5>
      <p>讨论区周报l有干货!【签别科普知识】活动开始啦~<br><span>56条回复&nbsp;&nbsp;28条大神回复</span></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "SeverDiscern",
};
</script>

<style scoped>
.discern-box {
  width: 3.53rem;

  margin: 0.1rem auto;
  background-color: #ffffff;

}
.din {
  display: flex;
  height: 0.44rem;
  line-height: 0.44rem;
  margin-left: 0.17rem;
  justify-content: space-between;
}

.din span {
  font-size: 0.1rem;
  color: #636363;
}
.din p {
  margin-right: 0.2rem;
  color: #636363;
  font-size: 0.14rem;
}

.online {

  margin: 0.2rem 0.17rem;
  height: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.online .p1{
  font-size: 0.1rem;
  line-height: 0.2rem;
}
.p2{
  width:1.1rem ;
  height: 0.4rem;
  background-color: #00cacc;
  text-align: center;
  color: #ffffff;
  line-height:0.4rem;
  border-radius: 0.05rem;
}
.column {
  width: 3.53rem;
    margin: 0.2rem 0.17rem;
    display: flex;
    
}
.column h5{
  background-color: #3a3845;
  text-align: center;
  color: #ffffff;
  width: 0.5rem;
  height: 0.16rem;
  border-radius: 0.03rem;
  font-size: 0.1rem;
  line-height: 0.16rem;
    
}
.column h5{
   font-size: 0.1rem;
}
.column p{
font-size: 0.12rem;
margin-left: 0.1rem;
line-height: 0.2rem;
}
.column p span{
  color: #b9b9ba;
  font-size: 0.1rem;
}
</style>